<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import EchartsMixins from '../echarts.mixins'
  import Format from '@/utils/format'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        textColor: '#00e6ff',
        yAxisList: [],
        charts: '',
        xAngleList: [],
        compensateXAngleList: [],
        // 监测点名称
        monitorName: '',
        seriesLists: [],
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          animationDuration: 2000, // 动画时长 可以接受 回调函数
          title: {
            show: false,
            text: this.monitorName + '倾角变化曲线图',
            x: 'center',
            textStyle: {
              color: this.textColor
            }
          },
          grid: {
            left: 60,
            right: 100,
            bottom: 20,
            // 区域是否包含坐标轴的刻度标签
            containLabel: false
          },
          legend: {
            data: ['相对倾角'],
            y: 'top',
            x: 'right',
            padding: [10, 120, 20, 50],
            // 设置为可滚动的图例
            type: 'scroll',
            textStyle: {
              color: this.textColor
            }
          },
          toolbox: {
            right: '5',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              contentArr.push(Format(new Date(params[0].value[0])))
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + '°')
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            symbol: 'none',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel: true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('hh:mm:ss', new Date(value))
              },
              textStyle: {
                color: this.textColor
              },
              interval: 5,
              fontSize: 10,
            },
          },
          yAxis: {
            max: function (value) {
              if (value.max < 0.01) {
                return 0.01;
              }
              return value.max;//向上取整
            },
            name: '角度值(°)',
            type: 'value',
            nameTextStyle: {
              color: this.textColor
            },
            axisLine: {
              lineStyle: {
                color: this.textColor
              }
            },
            splitLine: { //网格线：隐藏
              lineStyle: {
                color: 'rgba(127, 127, 127, 0.5)',
                type: 'dashed', // 线型为虚线
              }
            }
          },
          series: {
            lineStyle: {
              width: 3 // 设置线条粗细为3
            },
            yAxisIndex: 0,
            name: '相对倾角',
            type: 'line',
            smooth: 0.8,
            animation: false,
            symbol: 'none',
            data: this.compensateXAngleList,
            // markPoint: {
            //   symbolSize: 70,
            //   data: [
            //     {type: 'max', name: 'Max'},
            //     {type: 'min', name: 'Min'}
            //   ],
            //   label: {
            //     position: "inside",
            //     distance: 7,
            //     formatter: function (data) {
            //       return data.value + '°'
            //     }
            //   },
            //   itemStyle: {
            //     color: '#ff0000'
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#ffa900'
              }
            },
            markLine: {
              data: this.markLine,
            }
          },
          visualMap: {
            show: true,
            textStyle: {
              color: '#ffffff' // 设置字体颜色为红色
            },
            precision: 1,
            top: 20,
            right: 10,
            pieces: this.pieces,
          },
        }
      }
    },
    methods: {
      randomPercentage(min, max) {
        return Math.random() * (max - min) + min;
      },
      addData(data, sampleTime) {
        if(this.firstData){
          this.charts.clear()
          this.charts.resize()
          this.compensateXAngleList = []
          this.firstData = false
        }
        let base = 92.7635; //基准值
        // if (!this.lastData) {
        //   this.compensateXAngleList = []
        //   console.log('34')
        //   this.lastData = (data.in - base).toFixed(3)
        // } else {
        //   let list = this.compensateXAngleList
        //   console.log('12')
        //   //中间穿插过度数据
        //   let lastData = this.lastData
        //   let nowData = (data.in - base).toFixed(3)
        //   let n = (nowData - lastData).toFixed(3)
        //   console.log(n)
        //   let step = n == 0 ? 0 : 5 //数据数量
        //   console.log('初始时间：' + sampleTime)
        //   let new_in = 0
        //   if (n > 0) {
        //     console.log('11111111111111232323--' + (Number(lastData) + n / step))
        //     //变大
        //     for (let i = 1; i < step; i++) {
        //       if (list.length > 100) {
        //         this.compensateXAngleList.shift()
        //       }
        //       sampleTime = sampleTime + n / step * 100
        //       new_in = Number(lastData) + this.randomPercentage(0,n / step)
        //       this.compensateXAngleList.push([sampleTime, (new_in).toFixed(3)])
        //       console.log('添加了：' + sampleTime + ';' + new_in)
        //     }
        //   } else {
        //     console.log('2222222222222222232323')
        //     //变小
        //     for (let i = 1; i < step; i++) {
        //       if (list.length > 100) {
        //         this.compensateXAngleList.shift()
        //       }
        //       sampleTime = sampleTime + n / step * 50
        //       this.compensateXAngleList.push([sampleTime, (Number(lastData) - n / step * i).toFixed(3)])
        //       console.log('添加了：' + sampleTime + ';' + (Number(lastData) - n / step * i).toFixed(3))
        //     }
        //   }
        //   this.lastData = (data.in - base).toFixed(3)
        // }
        let num = (data.in - base).toFixed(3)
        if (num <= 0.012  && num >= -0.012) {
          //自身波动
          num = 0
        }
        if(this.compensateXAngleList.length > 500){
          this.compensateXAngleList.shift()
        }
        this.compensateXAngleList.push([sampleTime, num])
        this.charts.setOption(this.options)
        // console.log("倾角数据添加**************************")
      }
      ,
      updateEchart(data, monitorName) {
        this.lastData = ''
        this.charts.clear()
        this.charts.resize()
        this.monitorName = monitorName
        this.compensateXAngleList = data.compensateInAngle
        this.initEcharts()
        this.charts.setOption(this.options)
      }
      ,
    },
  }
</script>
